<template>
	<view>
		<view class="page-head">
			<view style="padding: 20rpx;position: relative;">
				<tui-progress :percent="percentage" activeColor="linear-gradient(90deg, #0085FF 0%, #98CEFF 100%)"></tui-progress>
				<view class="page-head-progress-text">1/13</view>
			</view>
			<view class="page-head-progress-desc">
				<view class="page-head-progress-desc-left">
				</view>
				<view class="">
					苹果
				</view>
			</view>
		</view>
		<view class="page-content">
			<div class="page-content-item">
				<view class="page-content-item-label">型号类型</view>
				<view class="page-content-item-value">直屏</view>
			</div>
			<div class="page-content-item">
				<view class="page-content-item-label">内爆</view>
				<view class="page-content-item-value">
					{{ phoneInfo.neibao }}
					<u-icon @click="changeShow('neibaoShow')" name="edit-pen" style="margin-left: 10rpx;" color="#888888" size="22"></u-icon>
				</view>
			</div>
			<view v-if="neibaoShow" class="page-content-novalue" >
				<view v-for="(item,index) in neibaoList" :class="phoneInfo.neibao == item.name ? 'active' : ''" class="page-content-novalue-item" :key="index" @click="changeValue('neibao',item)">
					{{ item.name }}
				</view>
			</view>
			<div v-if="phoneInfo.neibao" class="page-content-item">
				<view class="page-content-item-label">颜色</view>
				<view class="page-content-item-value">
					{{ phoneInfo.color }}
					<u-icon @click="changeShow('colorShow')" name="edit-pen" style="margin-left: 10rpx;" color="#888888" size="22"></u-icon>
				</view>
			</div>
			<view v-if="phoneInfo.neibao && colorShow" class="page-content-novalue" >
				<view v-for="(item,index) in colorList" :class="phoneInfo.color == item.name ? 'active' : ''" class="page-content-novalue-item" :key="index" @click="changeValue('color',item)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="page-btn">
			下一步
		</view>
	</view>
</template>

<script>
	import tuiProgress from "@/components/thorui/tui-progress/tui-progress.vue"
	export default {
		components:{
				tuiProgress
		},
		data() {
			return {
				percentage:20,
				phoneInfo:{
					neibao:'',
					color:''
				},
				neibaoShow:true,
				neibaoList:[
					{name:'是',id:1},
					{name:'否',id:2}
				],
				colorList:[
					{name:'白色',id:1},
					{name:'黑色',id:2}
				],
				colorShow:true
			}
		},
		methods: {
			changeValue(data,value){
				this.phoneInfo[data] = value.name
			},
			changeShow(data){
				this[data] = !this[data]
			}
		}
	}
</script>

<style lang="less" scoped>
	.page{
		&-head{
			background-color: #fff;
			padding-bottom: 20rpx;
			.page-head-progress-text{
				position: absolute;
				top: 12rpx;
				left: 50%;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.page-head-progress-desc-left{
				width: 8rpx;
				height: 40rpx;
				background: linear-gradient(180deg, #0085FF 0%, #98CEFF 100%);
				border-radius: 4rpx;
				margin-right: 12rpx;
			}
			.page-head-progress-desc{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
		&-content{
			margin: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx 20rpx 20rpx;
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 26rpx 0;
				border-bottom: 1px solid #EDEDED;
				&-label{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				&-value{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888888;
				}
			}
			&-novalue{
				&-item{
					width: 100%;
					height: 80rpx;
					background: #F9F9F9;
					border-radius: 20rpx;
					background: #F9F9F9;
					text-align: center;
					line-height: 80rpx;
					margin-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888888;
				}
				
			}
		}
		&-btn{
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 40rpx;
			width: 88%;
			height: 80rpx;
			background: linear-gradient(180deg, #0085FF 0%, #98CEFF 100%);
			border-radius: 60rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	/deep/ .tui-progressbar__bg{
		height: 18rpx !important;
	}
	/deep/ .tui-progress__bar{
		height: 18rpx !important;
	}
	.active{
		color: #0085FF;
		border: 1px solid #0085FF;
	}
</style>
